<template>
  <div>
    <!-- <p style="float: left; margin-top: 10px; margin-left: 20px; font-weight: 700">图片管理</p> -->
    <el-select v-model="value1" placeholder="请选择" class="option1">
      <el-option
        v-for="item in option1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="primary" class="pri1" @click="selBtn()">搜索</el-button>

    <div class="box2">
      <el-button type="primary" class="addbtn" @click="abbImgList()"
        >添加</el-button
      >
      <table border="1" class="table1">
        <tr style="background: #f7f7f7">
          <th>ID</th>
          <th>图片</th>
          <th>类型</th>
          <th>操作</th>
        </tr>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td width="100">{{ item.id }}</td>
            <td><img width="100" :src="item.url" alt="" /></td>
            <td width="150">
              <el-tag
                size="small"
                :type="
                  item.type == 1
                    ? 'success'
                    : item.type == 2
                    ? 'danger'
                    : item.type == 3
                    ? 'warning'
                    : 'primary'
                "
              >
                {{
                  item.type == 1
                    ? "首页"
                    : item.type == 2
                    ? "咨询"
                    : item.type == 3
                    ? "生活"
                    : "其他"
                }}
              </el-tag>
            </td>
            <td width="300">
              <el-button
                @click="delBtn(item.id)"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
              <el-button
                @click="editBtn(item.id)"
                type="primary"
                icon="el-icon-edit"
                circle
              ></el-button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-upload
        class="upload-demo"
        action=""
        :on-change="handleRemove"
        multiple
        :limit="3"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div style="width: 100%; float: left">
        <img :src="iconurl" alt="" width="100" style="float: left" />
      </div>
      <el-select v-model="value2" placeholder="请选择" class="option2">
        <el-option
          v-for="item in option1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="conBtn()">{{ title }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getImgList } from "./api";
import { upload } from "./api";
import { addImgs } from "./api";
import { delBanners } from "./api";
import { getImgsbyid } from "./api";
export default {
  data() {
    return {
      currentPage4: "",
      option2: [
        {
          value: "1",
          label: "首页",
        },
        {
          value: "2",
          label: "咨询",
        },
        {
          value: "3",
          label: "生活",
        },
        {
          value: "4",
          label: "其他",
        },
      ],
      value2: "",
      iconBase64: "",
      iconurl: "",
      dialogFormVisible: false,
      tableData: [],
      option1: [
        {
          value: "1",
          label: "首页",
        },
        {
          value: "2",
          label: "咨询",
        },
        {
          value: "3",
          label: "生活",
        },
        {
          value: "4",
          label: "其他",
        },
      ],
      value1: "",
      title: "添加",
      total: 0,
      pagelimit: 10,
      page: 1,
    };
  },
  mounted() {
    this.getImgList();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagelimit = val;
      this.getImgList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getImgList();
    },
    // 编辑
    editBtn(id) {
      localStorage.setItem("id", id);
      this.dialogFormVisible = true;
      this.title = "编辑";
      getImgsbyid({ id: id }).then((res) => {
        console.log(res.data);
        if (res.code == 0) {
          this.iconurl = res.data.url;
          this.value2 =
            res.data.type == 1
              ? "首页"
              : res.data.type == 2
              ? "咨询"
              : res.data.type == 3
              ? "生活"
              : "其他";
        }
      });
    },
    // 删除
    delBtn(id) {
      this.$confirm("是否确认删除此条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBanners({ id: id }).then((res) => {
            if (res.code == 0) {
              this.getImgList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 搜索
    selBtn() {
      var obj = {
        type: this.value1,
      };
      getImgList(obj).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.tableData = res.data.data;
        }
      });
    },
    // 添加
    conBtn() {
      if (this.title == "添加") {
        var obj1 = {
          url: this.iconurl,
          type: this.value2,
        };
        addImgs(obj1).then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.dialogFormVisible = false;
            this.getImgList();
            this.$message({
              message: "添加成功",
              type: "success",
            });
          }
        });
      } else if (this.title == "编辑") {
        var obj2 = {
          url: this.iconurl,
          type:
            this.value2 == "首页"
              ? 1
              : this.value2 == "咨询"
              ? 2
              : this.value2 == "生活"
              ? 3
              : 4,
          id: localStorage.getItem("id"),
        };
        addImgs(obj2).then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.dialogFormVisible = false;
            this.getImgList();
          }
        });
      }
    },
    handleRemove(file) {
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        // reader.result是file 转 base64结果
        this.iconBase64 = reader.result;
      };
      // reader.onerror = function (error) {
      //     console.log("Error: ", error);
      // };

      const URL = "https://goods.zzgoodqc.cn";
      var obj = {
        imgurl: this.iconBase64,
      };
      upload(obj).then((res) => {
        console.log(URL + res.data.url);
        this.iconurl = URL + res.data.url;
      });
    },
    abbImgList() {
      this.dialogFormVisible = true;
      this.title = "添加";
    },
    // 列表
    getImgList() {
      var obj = {
        pagelimit: this.pagelimit,
        page: this.page,
      };
      getImgList(obj).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.pagecount;
      });
    },
  },
};
</script>


<style>
.block {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}
.other {
  padding: 2px 5px;
  border: 1px solid #0edea0;
  border-radius: 5px;
  background: #93fceb;
  font-size: 14px;
  color: #08ce92;
}
.life {
  padding: 2px 5px;
  border: 1px solid #fd9943;
  border-radius: 5px;
  background: #fee0c4;
  font-size: 14px;
  color: #fd9943;
}
.ask {
  padding: 2px 5px;
  border: 1px solid #ff6160;
  border-radius: 5px;
  background: #ffc5c1;
  font-size: 14px;
  color: #ff6160;
}
.home {
  padding: 2px 5px;
  border: 1px solid #24a0ff;
  border-radius: 5px;
  background: #bedfff;
  font-size: 14px;
  color: #24a0ff;
}
.option2 {
  /* float:left; */
  margin-top: 20px;
}
tbody tr td {
  padding: 10px 0;
}
tbody {
  text-align: center;
}
.addbtn {
  float: left;
  margin-top: 10px;
  margin-left: 1%;
}
th {
  color: #5c6168;
}
.table1 tr {
  height: 50px;
}
.table1 {
  width: 90%;
  float: left;
  border: 1px solid #eeeeee;
  margin-top: 1%;
  margin-left: 1%;
  border-collapse: collapse;
}
.box2 {
  float: left;
  width: 95%;
  background: #fff;
  margin-top: 20px;
  margin-left: 20px;
  border-radius: 5px;
  padding-bottom: 20px;
}
.text1 {
  float: left;
  margin-top: 30px;
  margin-left: 30px;
  line-height: 40px;
  color: #5c6168;
}
.pri1 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.option1 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.box1 {
  float: left;
  width: 1650px;
  height: 100px;
  background: #fff;
  margin-top: 10px;
  margin-left: 20px;
  border-radius: 5px;
}
</style>
